<template>
    <div>
        
        <h1>食谱列表</h1>
        菜谱标题<input type="text" v-model="date.Ftitle">
        菜谱类型<select v-model="date.Tid">
            <option v-for="a in Bna" :value="a.tid">{{a.tname}}</option>
        </select>
        <input type="button" value="查询" @click="cx">
     <table>
        <thead>
            <tr>
                <td>菜谱标题</td>
                <td>图片</td>
                <td>菜谱类型</td>
                <td>发布时间</td>
                <td>菜谱介绍</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="a in list">
                <td>{{a.ftitle}}</td>
                <td>
                    <img :src="'https://localhost:7084'+a.img" style="height: 100px; width: 100px;" alt="">
                </td>
                <td>{{a.tid}}</td>
                <td>{{a.createtime}}</td>
                <td>{{ a.fxq}}</td>
                <td></td>
            </tr>
        </tbody>
     </table>
     <input type="button" value="首页" @click="fanye(1)">
     <input type="button" value="上一页" @click="fanye(2)">
     <input type="button" value="下一页" @click="fanye(3)">
     <input type="button" value="尾页" @click="fanye(4)">
     一共{{datalist.pount}}页,一共{{datalist.count}}行,当前第{{date.index}}页,当前第{{date.size}}行
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted}from"vue";
import axios from "axios";
const cx=()=>{
    date.value.index=1;
    Show();
}




onMounted(()=>{
    Bang();
})
const Bna=ref([{
     "tid": 1,
    "tname": "牛肉"
}])

const Bang=()=>{
    axios.get('https://localhost:7084/api/Type/Bang',{params:Bna.value}).then(res=>{
             Bna.value=res.data;
    })
}






const fanye=(a:any)=>{
   if(a==1){
    date.value.index=1;
    Show();
   }
   if(a==2){
    if(date.value.index>1){
        date.value.index-=1;
        Show();
    }
   }
   if(a==3){
    if(date.value.index<datalist.value.pount){
        date.value.index+=1;
        Show();
    }
   }
   if(a==4){
    date.value.index=datalist.value.pount;
    Show();
   }
}




//显示
onMounted(()=>{
    Show();
})
const list=ref([{
    "fid": 1,
      "ftitle": "string",
      "img": "string",
      "tid": 0,
      "createtime": "2025-03-19T01:38:30.339",
      "fxq": "string"
}])

const date=ref({
    index:1,
    size:2,
    Ftitle:"",
    Tid:null
})
const datalist=ref({
    count:0,
    pount:0
})

const Show=()=>{
   axios.get('https://localhost:7084/api/Food/GetById',{params:date.value}).then(res=>{
        list.value=res.data.data;
        datalist.value.count=res.data.count;
        datalist.value.pount=Math.ceil(res.data.count/date.value.size);
   })
}
</script>

<style scoped>

</style>